<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#container{
			width: 100%;
			height: 400px;
			/* background-color: aqua; */      /* 背景颜色 */
			display: flex;               /* 清除浮动 */
			justify-content: center;   /* 内容横向居中 */
			align-items: center;       /* 内容纵向居中 */
		}
		#coverId{
			height: 300px;
			width: 420px;
			display: flex;
			/* background-color: greenyellow; */
			align-items: center;
			overflow: hidden;       /* 遮盖掉溢出的内容 */
		}
		#imgsId{
			display: flex;           /* 清除浮动 */
		}
		#imgsId img{
			height: 70px;
			width: 70px;
		}
	</style>
	<body>
		<div id="container">
			<div id="coverId">
				<div id="imgsId">
					<img src="imgs/1.jpeg" >
					<img src="imgs/2.jpeg" >
					<img src="imgs/3.jpeg" >
					<img src="imgs/4.jpeg" >
					<img src="imgs/5.jpeg" >
					<img src="imgs/6.jpeg" >
					<img src="imgs/7.jpeg" >
					<img src="imgs/8.jpeg" >
					<img src="imgs/9.jpeg" >
					<img src="imgs/10.jpeg" >
					<img src="imgs/1.jpeg" >
					<img src="imgs/2.jpeg" >
					<img src="imgs/3.jpeg" >
					<img src="imgs/4.jpeg" >
					<img src="imgs/5.jpeg" >
					<img src="imgs/6.jpeg" >
				</div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
	    var imgsIdObject=document.getElementById('imgsId');
		var num=0;
		function moveDistance(){
			num--;
			imgsIdObject.style.marginLeft=num+'px';
			if(num==-700){
				num=0;
			}
		}
		onload = function(){
			setInterval(moveDistance,10);
		}
	</script>
</html>
